<template>
  <view class="pages">
    <view class="order-card order-steps w100" v-if="info.status != '-1'">
      <text class="tit">当前流程：</text>
      <text class="item-1">订单</text>
      <view class="item" v-for="(item, index) in stepsTexts" :key="index" :class="stepsIndex == index?'active':''">
        <u-icon name="arrow-rightward" color="#fff" size="24"></u-icon>
        <text>{{item}}</text>
      </view>
    </view>
    <view class="order-card order-info w100">
      <view class="tit">
        <view class="top-t">
          <image src="/static/home/icon-order-mobile.png"></image>
          <view class="text">手机订单（{{info.kuaidi_type == 1?'直寄':'转寄'}}）</view>
          <view v-if="info.status" class="status" :class="'status' + info.status">
            <text>{{statusParm(info.status)}}</text>
          </view>
        </view>
        <view class="top-b" v-if="Number(info.status)<6">
          <image src="/static/order/icon-order-price.png"></image>
          <view class="text">
            <text>{{info.status == 6?'最终回收价':'预估回收价'}}：</text>
            <text class="price">{{priceText()}}元</text>
            <!-- <view class="icon" v-if="info.status == 6 && spreadPrice() != 0">
              <u-icon :name="'arrow-' + spreadPriceUp()" color="#fff" size="20"></u-icon>
              <text class="num">{{spreadPrice()}}</text>
            </view> -->
          </view>
          <view class="status">{{statusParms(info.status, info.payment_path)}}</view>
        </view>
        <view class="top-b" v-if="Number(info.status)==6">
          <image src="/static/order/icon-order-price.png"></image>
          <view class="text">
            <text>最终结算价：</text>
            <text
              class="price">{{info.settlement_price.indexOf('-')>=0?info.settlement_price:'+'+info.settlement_price}}</text>
          </view>
        </view>
        <view class="top-b" v-if="Number(info.status)==6">
          <view class="text e-text">
            <u-icon name="red-packet" color="#fff" size="28"></u-icon>
            <text class="price-tit">最终回收价：</text>
            <text>{{info.price}}元</text>
          </view>
          <view class="text e-text">
            <u-icon name="red-packet" color="#fff" size="28"></u-icon>
            <text class="price-tit">预估回收价：</text>
            <text>{{info.expect_price}}元</text>
          </view>
          <view class="text e-text" v-if="info.freight">
            <u-icon name="car" color="#fff" size="28"></u-icon>
            <text class="price-tit">快递费：</text>
            <text>{{info.freight}}元</text>
          </view>
          <view class="text e-text">
            <u-icon name="coupon" color="#fff" size="28"></u-icon>
            <text class="price-tit">手续费：</text>
            <text>{{info.commission_price}}元（{{info.commission}}%）</text>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="text">
          <text>手机型号：</text>
          <text>{{info.product_name}}</text>
        </view>
        <view class="text">
          <text>颜色：</text>
          <text>{{info.colour}}</text>
        </view>
        <view class="text">
          <text>内存：</text>
          <text>{{info.memory}}</text>
        </view>
        <view class="text" v-if="info.imei!=''">
          <text>序列号：</text>
          <text>{{info.imei}}</text>
        </view>
        <view class="text">
          <text>订单时间：</text>
          <text>{{info.createtime_text}}</text>
        </view>
      </view>
    </view>
    <view class="order-card order-express w100" v-if="info.kuaidi_type == 2">
      <view class="tit">快递单号：</view>
      <view class="box flex-box">
        <text>{{info.kuaidinum}}</text>
        <u-button type="primary" size="mini" @click="$to('/pages/order/expressDelivery',{id:info.id})">查询</u-button>
      </view>
    </view>
    <view class="order-card order-img w100" v-if="info.imeiimg && info.imeiimg.length>0">
      <view class="tit">序列号照片：</view>
      <view class="box">
        <image mode="aspectFill" v-for="(item, index) in info.imeiimg" :src="item" :key="index"
          @click="preview(info.imeiimg,index)"></image>
      </view>
    </view>
    <view class="order-card order-img w100" v-if="info.packimg && info.packimg.length>0">
      <view class="tit">详情照片：</view>
      <view class="box">
        <image mode="aspectFill" v-for="(item, index) in info.packimg" :src="item" :key="index"
          @click="preview(info.packimg,index)"></image>
      </view>
    </view>
    <view class="order-card order-ramark w100" v-if="Number(info.status)<6">
      <view class="tit">备注：</view>
      <view class="box">
        {{info.other || '无'}}
      </view>
    </view>
    <view class="order-card order-form w100" v-if="Number(info.payment_path)>0">
      <view class="tit">
        <view class="l">
          <text>客户收款信息</text><u-icon @click="showSubmit = true" name="info" color="#fff" size="22"></u-icon>
        </view>
        <text v-if="info.payment_path == 1" class="r"
          @click="$to('/pages/my/paymentAccount/index',{infoType:'custompayment'})">选择</text>
      </view>
      <view class="box">
        <u--form labelPosition="left" :model="custompayment" ref="uForm" labelWidth="155" :labelStyle="labelStyle">
          <u-form-item label="收款类型">
            <u-radio-group v-model="custompayment.type" :disabled="isInput" @change="changeType">
              <u-radio v-for="(item, index) in custompaymentTypes" :key="index" :label="item.label"
                :name="item.id"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="姓名：" required>
            <u--input v-model="custompayment.name" border="surround" placeholder="请输入收款人姓名"
              :readonly="isInput"></u--input>
          </u-form-item>
          <u-form-item label="手机号：" required>
            <u--input v-model="custompayment.mobile" border="surround" placeholder="请输入收款人手机号"
              :readonly="isInput"></u--input>
          </u-form-item>
          <u-form-item label="身份证：" required v-if="custompayment.type == 1">
            <u--input v-model="custompayment.card" border="surround" placeholder="请输入收款人身份证"
              :readonly="isInput"></u--input>
          </u-form-item>
          <u-form-item v-if="custompayment.type == 1" label="银行卡：" required>
            <u--input v-model="custompayment.accountnumber" border="surround" placeholder="请输入收款人银行卡号"
              :readonly="isInput"></u--input>
          </u-form-item>
          <u-form-item v-if="custompayment.type == 2" label="收款码图：" required>
            <u-upload :fileList="accountnumberImgList" @afterRead="accountnumberImgAfterRead"
              @delete="accountnumberImgDelete" name="1" width="120" height="120" :maxCount="1"
              :previewFullImage="true"></u-upload>
          </u-form-item>
          <u-form-item label="分配金额：" required>
            <u--input v-model="custompayment.price" border="surround" placeholder="请输入收款分配金额"
              :readonly="isInput"></u--input>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="order-card order-form w100" v-if="Number(info.payment_path)>0">
      <view class="tit">
        <view class="l">
          <text>企业收款信息</text><u-icon @click="showSubmit = true" name="info" color="#fff" size="22"></u-icon>
        </view>
        <!-- <text v-if="info.payment_path == 1" class="r"
          @click="$to('/pages/my/paymentAccount/index',{type:'userpayment'})">选择</text> -->
      </view>
      <view class="box">
        <u--form labelPosition="left" :model="userpayment" ref="uForm" labelWidth="155" :labelStyle="labelStyle">
          <u-form-item :label="nameParse()" required>
            <u--input v-model="userpayment.name" border="surround" placeholder="请输入收款人姓名" readonly></u--input>
          </u-form-item>
          <u-form-item label="手机号：" required v-if="userpayment.type ==2">
            <u--input v-model="userpayment.mobile" border="surround" placeholder="请输入收款人手机号" readonly></u--input>
          </u-form-item>
          <u-form-item label="身份证：" required v-if="userpayment.type ==2">
            <u--input v-model="userpayment.card" border="surround" placeholder="请输入收款人身份证" readonly></u--input>
          </u-form-item>
          <u-form-item :label="accountnumberParse()" required>
            <u--input v-model="userpayment.accountnumber" border="surround" placeholder="请输入收款人银行卡号"
              readonly></u--input>
          </u-form-item>
          <u-form-item label="开户行：" required v-if="userpayment.type ==1">
            <u--input v-model="userpayment.bankname" border="surround" placeholder="请输入收款人银行卡号" readonly></u--input>
          </u-form-item>
          <u-form-item label="行号：" required v-if="userpayment.type ==1">
            <u--input v-model="userpayment.banknumber" border="surround" placeholder="请输入收款人银行卡号" readonly></u--input>
          </u-form-item>
          <u-form-item label="分配金额：" required>
            <u--input v-model="userpayment.price" border="surround" placeholder="请输入收款分配金额"
              :readonly="isInput"></u--input>
            <u-button slot="right" size="mini" type="primary">冻结金额：{{info.earnest_price}}</u-button>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="order-card order-form w100" v-if="Number(info.payment_path)>0 && Number(info.status)<3">
      <view class="tit">
        <view class="l">
          <text>取件地址</text>
        </view>
      </view>
      <view class="box">
        <u--form labelPosition="left" :model="pick" ref="uForm" labelWidth="155" :labelStyle="labelStyle">
          <u-form-item label="取件人：" required>
            <u--input v-model="pick.name" border="surround" placeholder="请输入姓名" :readonly="isInput"></u--input>
          </u-form-item>
          <u-form-item label="取件电话：" required>
            <u--input v-model="pick.mobile" border="surround" placeholder="请输入手机号" :readonly="isInput"></u--input>
          </u-form-item>
          <!-- <u-form-item label="取件地址：" required @click="chooseLocations">
            <u--input v-model="pick.pca_address" border="surround" readonly placeholder="请选择取件地址"
              suffixIcon="map-fill"></u--input>
          </u-form-item> -->
          <u-form-item label="取件地址：" required>
            <u--input v-model="pick.address" border="surround" placeholder="请输入取件地址" :readonly="isInput"></u--input>
          </u-form-item>
          <u-form-item label="预约日期：" required>
            <view @click="showDate = true"><u--input v-model="pick.timeday" readonly border="surround"
                suffixIcon="arrow-right"></u--input></view>
          </u-form-item>
          <u-form-item label="预约时间：" required>
            <view @click="changeTime('starttime')"><u--input v-model="pick.starttime" readonly border="surround"
                suffixIcon="arrow-right" placeholder="开始时间"></u--input></view>
            <view slot="right" @click="changeTime('endtime')"><u--input v-model="pick.endtime" readonly
                border="surround" suffixIcon="arrow-right" placeholder="结束时间"></u--input></view>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="order-card order-form w100" v-if="Number(info.status)==2">
      <view class="tit">
        <view class="l">
          <text>快递信息</text>
        </view>
        <!-- <text v-if="info.payment_path == 1" class="r"
          @click="$to('/pages/my/paymentAccount/index',{type:'userpayment'})">选择</text> -->
      </view>
      <view class="box">
        <u--form labelPosition="left" :model="kuaidiObject" ref="uForm" labelWidth="155" :labelStyle="labelStyle">
          <u-form-item label="快递号：">
            <u--input v-model="kuaidiObject.kuaidinum" border="surround" placeholder="请输入收款人姓名" readonly></u--input>
          </u-form-item>
          <u-form-item label="快递类型：">
            <u--input v-model="kuaidiObject.kuaidi_type" border="surround" placeholder="请输入收款人手机号" readonly></u--input>
          </u-form-item>
          <u-form-item v-if="kuaidiObject.courier_name != ''" label="快递员：">
            <u--input v-model="kuaidiObject.courier_name" border="surround" placeholder="请输入收款人身份证" readonly></u--input>
          </u-form-item>
          <u-form-item v-if="kuaidiObject.courier_mobile != ''" label="联系电话：">
            <u--input v-model="kuaidiObject.courier_mobile" border="surround" placeholder="请输入收款人银行卡号"
              readonly></u--input>
          </u-form-item>
          <u-form-item label="状态：">
            <u--input v-model="kuaidiObject.status_text" border="surround" placeholder="请输入收款人银行卡号" readonly></u--input>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="bottom-box fixed-bottom" v-if="info.status != -1">
      <u-button type="error" @click="cancelBtn" v-if="['0','1'].includes(info.status)">取消订单</u-button>
      <u-button type="primary" v-if="info.status == 1 && info.payment_path == 0" @click="next">下一步</u-button>
      <u-button type="primary" v-if="info.status == 1 && info.payment_path == 1" @click="sumbit">提交</u-button>
      <u-button type="primary" open-type="share" v-if="info.status == 1 && info.payment_path == 2"
        @click="send">发给客户确认</u-button>
    </view>
    <!-- 日期选择 -->
    <u-picker :show="showDate" :columns="selectDate" itemHeight="88" @confirm="confirmDate"
      @cancel="showDate = false"></u-picker>
    <!-- 时间选择 -->
    <u-datetime-picker :show="showTime" mode="time" itemHeight="88" @confirm="confirmTime"
      @cancel="cancelTime"></u-datetime-picker>

    <!-- 提交收款信息弹窗 -->
    <u-modal :show="showSubmit" @confirm="showSubmit = false">
      <view class="slot-content">
        <view class="box">
          <text
            class="text">请仔细填写客户和您的收款信息，我们将会通过您填写的信息进行核对，核验不通过造成的打款失败由您和客户自行承担。同时会将您打款金额里的100元作为保证金暂扣，在完成最终定价后以多退少补的方式在进行返还。</text>
        </view>
      </view>
    </u-modal>
    <!-- 取消弹窗提示 -->
    <u-modal :show="showClose" :showCancelButton="true" @confirm="confirmClose" @cancel="cancelClose">
      <view class="slot-content">
        <view class="box">
          <u-icon name="info-circle-fill" color="#fa3534" size="80"></u-icon>
          <text v-if="['0'].includes(info.status)" class="text">确认要取消订单？</text>
          <text v-if="info.status == 1 && info.payment_path == 0" class="text">订单已出价，确认要取消订单？</text>
          <text v-if="info.status == 1 && info.payment_path == 1" class="text">订单已出价，确认要取消订单？</text>
          <text v-if="info.status == 1 && info.payment_path == 2"
            class="text">请发给客户确认订单信息，取消订单将影响您在平台的信用度，确认要取消订单？</text>
        </view>
      </view>
    </u-modal>
    <!-- 确认类弹窗提示 -->
    <u-modal :show="showConf" :showCancelButton="true" @confirm="confirmConf" @cancel="cancelConf">
      <view class="slot-content">
        <view class="box" v-if="info.status == 1 && info.payment_path == 1">
          <u-icon name="info-circle-fill" color="#fa3534" size="80"></u-icon>
          <text class="text">请仔细确认您填写的信息，提交将无法修改，确认提交？</text>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        stepsTexts: ['出价', '确认', '上门', '完成'],
        stepsIndex: 0,
        info: {},
        labelStyle: {
          fontSize: "28rpx",
          color: "#666",
        },
        isImgUpload: true,  //是否上传图片
        accountnumberImgList: [],
        custompayment: {
          type: 1,
          name: '',
          mobile: '',
          card: '',
          accountnumber: '',
          price: '',
        },
        userpayment: {
          type: null,
          name: '',
          mobile: null,
          card: null,
          accountnumber: '',
          bankname: null,
          banknumber: null,
          price: '',
        },
        pick: {
          name: '',
          mobile: '',
          // pca_address: '',
          address: '',
          timeday: '',
          starttime: '',
          endtime: '',
        },
        kuaidiObject: {
          kuaidinum: '',
          kuaidi_type: '',
          courier_name: '',
          courier_mobile: '',
          status_text: '',
        },
        showDate: false,
        showTime: false,
        timeText: '',
        custompaymentTypes: [{
          label: '银行卡',
          id: 1

        }, {
          label: '收款码',
          id: 2
        }],
        selectDate: [
          ['今天', '明天', '后天']
        ],
        selectTime: [
          [{
            label: '1小时内',
            id: 1

          }, {
            label: '2小时内',
            id: 2
          }]
        ],
        title: '提示',
        showClose: false, //取消提示弹窗
        showConf: false, //确认类提示弹窗
        showSubmit: false, //提交收款信息提示
        modalType: '', //提示弹窗类型
        isInput: false, //是否可以输入内容
      }
    },
    onLoad(option) {
      if (option.id) this.id = option.id
      this.getDetail()
    },
    methods: {
      // 解析企业收款信息-name文字
      nameParse() {
        if (this.userpayment.type == 1) return '企业名称：'
        else if (this.userpayment.type == 2) return '姓名：'
        else return '名称：'
      },
      // 解析企业收款信息-accountnumber文字
      accountnumberParse() {
        if (this.userpayment.type == 1) return '账号：'
        else if (this.userpayment.type == 2) return '银行卡：'
        else return '支付宝：'
      },
      //价格展示
      priceText() {
        if (!this.info.expect_price) {
          return '？？？？'
        } else {
          if (this.info.price == "0.00") return this.info.expect_price
          else return this.info.price
        }
      },
      // 最终差价展示
      spreadPrice() {
        return Math.abs(Number(this.info.price) - Number(this.info.expect_price))
      },
      // 最终差价增减展示
      spreadPriceUp() {
        const spread = Number(this.info.price) - Number(this.info.expect_price)
        if (spread < 0) {
          return 'downward'
        } else if (spread > 0) {
          return 'upward'
        }
      },
      // 切换状态
      changeTab(e) {
        // this.query.status = e.id
      },

      // 选择的账号信息
      selectAccount(obj) {
        this.isImgUpload = false
        this[obj.infoType].type = !obj.type ? 1 : obj.type
        this[obj.infoType].name = obj.name
        this[obj.infoType].accountnumber = obj.accountnumber
        this[obj.infoType].mobile = obj.mobile
        if (obj.type == 1) {
          this[obj.infoType].card = obj.card
        }
        if (obj.type == 2) {
          this.accountnumberImgList = [{
            url: obj.accountnumber
          }]
        }
      },
      // 切换类型
      changeType(e) {
        this.custompayment.accountnumber = ''
        this.accountnumberImgList = []
        this.isImgUpload = true
      },
      // 选择详情照片
      accountnumberImgAfterRead(event) {
        let lists = [].concat(event.file)
        let fileListLen = this.accountnumberImgList.length
        lists.map((item) => {
          this.accountnumberImgList.push({
            ...item
          })
        })
      },
      // 删除详情照片
      accountnumberImgDelete(event) {
        if(this.isInput) return
        this.isImgUpload = true
        this.accountnumberImgList.splice(event.index, 1)
      },
      // 选择地址
      // chooseLocations() {
      //   if (this.isInput) return
      //   uni.getSystemInfo({
      //     success: ({
      //       locationEnabled,
      //       locationAuthorized
      //     }) => {
      //       if (locationEnabled === false || locationAuthorized === false) {
      //         this.$showModal({
      //           title: '提示',
      //           content: '请打开定位服务功能'
      //         })
      //       } else {
      //         uni.chooseLocation({
      //           success: res => {
      //             this.pick.pca_address = res.address
      //           }
      //         })
      //       }
      //     }
      //   })
      // },
      // 选择收件时间
      changeTime(name) {
        if (this.isInput) return
        this.timeText = name
        this.showTime = true
      },
      confirmDate(e) {
        this.pick.timeday = e.value[0]
        this.showDate = false
      },
      cancelTime() {
        this.showTime = false
      },
      confirmTime(e) {
        this.pick[this.timeText] = e.value
        this.showTime = false
      },
      async getDetail() {
        const res = await this.$http('/order/detail', {
          id: this.id
        })
        this.info = res.info
        if (this.info.status == 0) {
          this.stepsIndex = 0
        } else if (this.info.status == 1) {
          this.stepsIndex = 1
        } else if (['2', '3'].includes(this.info.status)) {
          this.stepsIndex = 2
        } else {
          this.stepsIndex = 3
        }
        if (this.info.custom_payment) {
          this.custompayment.type = this.info.custom_payment.type
          this.custompayment.name = this.info.custom_payment.name
          this.custompayment.mobile = this.info.custom_payment.mobile
          this.custompayment.card = this.info.custom_payment.card
          this.custompayment.accountnumber = this.info.custom_payment.accountnumber
          this.custompayment.price = this.info.custom_payment.price
          if (this.info.custom_payment.type == 2) {
            this.accountnumberImgList = [{
              url: this.info.custom_payment.accountnumber
            }]
          }
        }

        if (this.info.user_payment) {
          this.userpayment.type = this.info.user_payment.type
          this.userpayment.name = this.info.user_payment.name
          this.userpayment.mobile = this.info.user_payment.mobile
          this.userpayment.card = this.info.user_payment.card
          this.userpayment.accountnumber = this.info.user_payment.accountnumber
          this.userpayment.bankname = this.info.user_payment.bankname
          this.userpayment.banknumber = this.info.user_payment.banknumber
          this.userpayment.price = this.info.user_payment.price
        } else {
          this.userpayment.type = this.info.company_payment.type
          this.userpayment.name = this.info.company_payment.name
          this.userpayment.mobile = this.info.company_payment.mobile
          this.userpayment.card = this.info.company_payment.card
          this.userpayment.accountnumber = this.info.company_payment.accountnumber
          this.userpayment.bankname = this.info.company_payment.bankname
          this.userpayment.banknumber = this.info.company_payment.banknumber
        }

        if (this.info.pick) {
          this.pick.name = this.info.pick.name
          this.pick.mobile = this.info.pick.mobile
          // this.pick.pca_address = this.info.pick.pca_address
          this.pick.address = this.info.pick.address
          this.pick.timeday = this.info.pick.timeday
          this.pick.starttime = this.info.pick.starttime
          this.pick.endtime = this.info.pick.endtime
        }
        if (this.info.kuaidi) {
          this.kuaidiObject.kuaidinum = this.info.kuaidi.kuaidinum
          this.kuaidiObject.kuaidi_type = this.info.kuaidi.kuaidi_type
          this.kuaidiObject.courier_name = this.info.kuaidi.courier_name
          this.kuaidiObject.courier_mobile = this.info.kuaidi.courier_mobile
          this.kuaidiObject.status_text = this.info.kuaidi.status_text
        }
        if (this.info.payment_path == 2) this.isInput = true
      },
      // 解析订单状态
      statusParm(status) {
        const statusList = [{
            id: -1,
            label: "已取消"
          },
          {
            id: 0,
            label: "待出价"
          },
          {
            id: 1,
            label: "待确认"
          },
          {
            id: 2,
            label: "待上门"
          },
          {
            id: 3,
            label: "待打款"
          },
          {
            id: 4,
            label: "已打款"
          },
          {
            id: 5,
            label: "待最终报价"
          },
          {
            id: 6,
            label: "已完成"
          }
        ]
        return statusList[statusList.findIndex(item => item.id == status)].label
      },
      // 解析订单状态,显示具体状态信息
      statusParms(status, status2) {
        if (status == 1 && status2 == 2) return '请将订单分享给客户确认'
        if (status == 2) return '已分配快递员上门取件'
        if (status == 3) return '已取件，待自动打款'
        if (status == 4) return '待收货'
        else return ''
      },
      // 预览图
      preview(arr, index) {
        uni.previewImage({
          urls: arr,
          current: index,
        });
      },
      // 取消订单操作
      cancelBtn() {
        this.showClose = true
      },
      // 取消订单的确认操作
      confirmClose() {
        this.showClose = false
        this.cancelOrder()
      },
      // 取消弹窗
      cancelClose() {
        this.showClose = false
      },
      // 确认/提交弹窗的confirm操作
      async confirmConf() {
        this.showConf = false
        if (this.custompayment.type == 1) {
          if (this.info.status == 1 && this.info.payment_path == 1) this.update()
        } else if (this.custompayment.type == 2) {
          if(!this.isImgUpload){
            if (this.info.status == 1 && this.info.payment_path == 1) this.update()
            return
          }
          if (this.accountnumberImgList.length == 0) return this.$f.toast('请上传收款码')
          this.$f.tipLoading('图片上传中')
          let num = 0
          let arr = []
          const length = this.accountnumberImgList.length
          for (let i = 0; i < this.accountnumberImgList.length; i++) {
            const result = await this.uploadFilePromise(this.accountnumberImgList[i].url)
            arr.push(result.fullurl)
            num++
          }
          this.custompayment.accountnumber = arr[0]
          if (num == length) {
            uni.hideLoading()
            if (this.info.status == 1 && this.info.payment_path == 1) this.update()
          }
        }
      },
      // 确认/提交弹窗的cancel操作
      cancelConf() {
        this.showConf = false
      },

      // 下一步
      async next() {
        const res = await this.$http('/order/expectConfirm', {
          order_id: this.id
        })
        this.getDetail()
      },
      // 提交
      sumbit() {
        this.showConf = true
      },
      // 发送客户确认
      send() {},
      // 取消订单请求
      async cancelOrder() {
        const res = await this.$http('/order/cancel', {
          order_id: this.id
        })
        // console.log("res", res)
        this.$f.successToast('取消订单成功')
        this.getDetail()
      },
      // 提交修改数据
      async update() {
        if (this.custompayment.name == '') return this.$f.toast('请输入客户收款人姓名')
        if (this.custompayment.mobile == '') return this.$f.toast('请输入客户收款人手机号')
        if (this.custompayment.type == 1 && this.custompayment.card == '') return this.$f.toast('请输入客户收款人身份证')
        if (this.custompayment.type == 1 && this.custompayment.accountnumber == '') return this.$f.toast(
          '请输入客户收款人银行卡号')
        if (this.custompayment.type == 2 && this.custompayment.accountnumber == '') return this.$f.toast(
          '请输入客户收款人支付宝')
        if (this.custompayment.price == '') return this.$f.toast('请输入客户收款分配金额')
        if (this.userpayment.price == '') return this.$f.toast('请输入企业收款分配金额')
        // if (this.info.kuaidi_type == 1) {
        if (this.pick.name == '') return this.$f.toast('请输入取件人姓名')
        if (this.pick.mobile == '') return this.$f.toast('请输入取件手机号')
        // if (this.pick.pca_address == '') return this.$f.toast('请选择取件地址')
        if (this.pick.address == '') return this.$f.toast('请输入取件地址')
        if (this.pick.timeday == '') return this.$f.toast('请选择预约日期')
        if (this.pick.starttime == '') return this.$f.toast('请输入预约开始时间')
        if (this.pick.endtime == '') return this.$f.toast('请输入预约结束时间')
        // }
        if (Number(this.custompayment.price) + Number(this.userpayment.price) != Number(this.info.expect_price))
          return this.$f.toast('分配金额（客户+企业）需要等于预估回收价')
        const form = {
          order_id: this.id,
          custompayment_type: this.custompayment.type,
          custompayment_name: this.custompayment.name,
          custompayment_mobile: this.custompayment.mobile,
          custompayment_accountnumber: this.custompayment.accountnumber,
          custompayment_price: this.custompayment.price,
          userpayment_price: this.userpayment.price,
          // pick_name: this.pick.name,
          // pick_mobile: this.pick.mobile,
          // pick_pca_address: this.pick.pca_address,
          // pick_address: this.pick.address,
          // pick_timeday: this.pick.timeday,
          // pick_starttime: this.pick.starttime,
          // pick_endtime: this.pick.endtime
        }
        if (this.custompayment.type == 1) {
          form.custompayment_card = this.custompayment.card
        }
        // if (this.info.kuaidi_type == 1) {
        form.pick_name = this.pick.name
        form.pick_mobile = this.pick.mobile
        // form.pick_pca_address = this.pick.pca_address
        form.pick_address = this.pick.address
        form.pick_timeday = this.pick.timeday
        form.pick_starttime = this.pick.starttime
        form.pick_endtime = this.pick.endtime
        // }
        const res = await this.$http('/order/perfect', form)
        this.$f.successToast('保存成功')
        this.getDetail()
      },
      // 上传图片请求
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://hsxt.ruyihui.net/api/common/upload',
            filePath: url,
            header: {
              'token': uni.getStorageSync('token')
              // 'token': '0fe60a01-8332-409e-8d01-fdf0d4f9b1bd',
            },
            name: 'file',
            timeout: 10000,
            success: (res) => {
              setTimeout(() => {
                resolve(JSON.parse(res.data).data)
              }, 1000)
            },
            fail: res => {
              console.log('error')
              this.$f.errorToast('上传失败')
              reject(res)
            }
          });
        })
      },
    },
    // 分享
    onShareAppMessage() {
      return {
        title: '确认订单',
        path: `/pages/order/confirmOrder?id=${this.id}`,
        imageUrl: '/static/order/share.png'
      }
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding: 16rpx 16rpx calc(124rpx + #{$safe});
  }

  .order-card {
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
  }

  .order-steps {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 24rpx 40rpx;
    font-size: 24rpx;
    margin-bottom: 16rpx;

    .tit {
      color: #999;
    }

    .item-1 {
      color: #1e1136;
      padding-left: 14rpx;
    }

    .item {
      display: flex;
      align-items: center;

      ::v-deep .u-icon__icon {
        margin: 0 14rpx !important;
        padding: 4rpx !important;
        border-radius: 30rpx !important;
        background-color: #ccc !important;
        font-weight: 700 !important;
      }

      &.active ::v-deep .u-icon__icon {
        background-color: #fa3534 !important;
      }
    }
  }


  .order-info {
    overflow: hidden;

    .tit {
      background: linear-gradient(#41a2ff, #79b2fe);

      padding: 30rpx 36rpx 30rpx 29rpx;
      color: #fff;
      font-size: 26rpx;


      .top-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 55rpx;
        line-height: 55rpx;

        image {
          width: 33rpx;
          height: 33rpx;
        }

        .text {
          width: 373rpx;
          font-size: 28rpx;
        }

        .status {
          width: 212rpx;

          text {
            float: right;
            padding: 0 20rpx;
            border-radius: 30rpx;
            background-color: #fff;
            font-size: 24rpx;
            font-weight: 700;
          }
        }

        .status-1 {
          color: #909399;
        }

        .status0 {
          color: #fa3534;
        }

        .status1 {
          color: #fa3534;
        }

        .status2 {
          color: #fa3534;
        }

        .status3 {
          color: #fa3534;
        }

        .status4 {
          color: #fa3534;
        }

        .status5 {
          color: #fa3534;
        }

        .status6 {
          color: #19be6b;
        }
      }

      .top-b {
        padding-top: 34rpx;
        min-height: 33rpx;
        line-height: 33rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        position: relative;

        &>image {
          padding-right: 18rpx;
          width: 33rpx;
          height: 33rpx;
        }

        .text {
          width: 320rpx;
          display: flex;
          align-items: center;

          &.e-text {
            padding-bottom: 12px;
          }

          .price-tit {
            padding-left: 4px;
          }

          .price {
            font-weight: 700;
            color: #fa3534;
          }

          .icon {
            position: absolute;
            top: 0;
            left: 210rpx;
            display: flex;
            align-items: center;
            font-size: 22rpx;

            .num {
              padding-left: 4rpx;
            }
          }
        }

        .status {
          width: 270rpx;
          font-size: 24rpx;
          text-align: right;
        }
      }

    }

    .box {
      padding: 20rpx 38rpx;

      .text {
        line-height: 56rpx;
        display: flex;
        align-items: center;
        color: #1d1715;
        font-size: 28rpx;

        text:first-child {
          width: 154rpx;
          color: #ccc;
        }
      }
    }
  }

  .order-express {
    margin-top: 16rpx;
    padding: 26rpx 38rpx;
    display: flex;

    .tit {
      width: 154rpx;
      color: #ccc;
      padding-top: 14rpx;
    }

    .box {
      flex: 1;
      line-height: 56rpx;
      color: #1d1715;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      ::v-deep .u-button {
        width: 100rpx;
      }
    }
  }

  .order-img {
    margin-top: 16rpx;
    padding: 26rpx 38rpx 0;
    display: flex;

    .tit {
      width: 170rpx;
      color: #ccc;
      padding-top: 46rpx;
    }

    .box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      image {
        width: 140rpx;
        height: 124rpx;
        border-radius: 8rpx;
        margin-right: 26rpx;
        margin-bottom: 26rpx;

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }

  .order-ramark {
    margin-top: 16rpx;
    padding: 26rpx 38rpx;
    display: flex;

    .tit {
      width: 154rpx;
      color: #ccc;
      padding-top: 14rpx;
    }

    .box {
      line-height: 56rpx;
      color: #1d1715;
      font-size: 28rpx;
    }
  }

  .order-form {
    margin-top: 16rpx;
    padding: 34rpx;

    .tit {
      padding-bottom: 16rpx;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .l {
        display: flex;
        align-items: center;

        ::v-deep .u-icon__icon {
          margin-left: 6rpx !important;
          padding: 4rpx !important;
          border-radius: 30rpx !important;
          background-color: #fa3534 !important;
        }
      }

      .r {
        color: #2979ff;
      }
    }

    .box {
      ::v-deep .u-input {
        padding: 8px 9px !important;
        background-color: #f4f8ff !important;
      }

      ::v-deep .u-border {
        border-color: #f4f8ff !important;
      }

      ::v-deep input {
        font-size: 28rpx !important;
      }

      ::v-deep .item__body__right__content__icon {
        padding-left: 10rpx !important;
        width: 240rpx !important;
      }

      ::v-deep .u-button--mini {
        width: 240rpx !important;
        height: 80rpx !important;
        font-size: 22rpx !important;
        justify-content: start;
      }
    }
  }

  .bottom-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    ::v-deep .u-button {
      border-radius: 80rpx;
      font-size: 28rpx !important;

      &:nth-child(2) {
        margin-left: 16rpx;
      }
    }
  }
</style>
